<template>
	<view>
		<Lines></Lines>
		<view class="my-add-path">	
			<view class="path-item">
				<view class='item-text'>收件人</view>
				<input v-model="pathData.userName" type="text" value="" placeholder="收件人姓名" />
			</view>
			<view class="path-item">
				<view class='item-text'>手机号</view>
				<input v-model="pathData.tel" type="text" value="" placeholder="手机号" />
			</view>
			<view class="path-item">
				<view class='item-text'>所在地区</view>
				<view class="f-color" 
				@click="showMulLinkageThreePicker">
				{{pathData.city?pathData.province+''+pathData.city+''+pathData.district:'请选择'}}
				<image style="width: 20rpx;height: 20rpx;" src="@/static/image/right.png" mode=""></image></view>

			</view>
			<view class="path-item">
				<view class='item-text'>详细地址</view>
				<input v-model="pathData.details" type="text" value="" placeholder="5到60个字符" />
			</view>
			<view class="path-item">
				<view class='item-text'>设为默认地址</view>
				<label class="radio">
					<radio :checked="pathData.isDefault==='1'?true:false" @click="isChecked" value="" color="#00B7FF" />
				</label>
			</view>
		</view>
		<button class="save_path_btn" @click="savePath()">保存</button>
		<!-- 城市选择组件 -->
		<mpvue-city-picker
		ref='mpvueCityPicker' 
		:pickerValueDefault='pickerValueDefault' 
		@onConfirm='onConfirm'>
			
		</mpvue-city-picker>
	</view>
</template>

<script>
	import $http from '@/common/api/request.js'
	import {mapActions} from 'vuex'
	import mpvueCityPicker from '../../components/uniapp/mpvue-citypicker/mpvueCityPicker.vue'
	import Lines from '../../components/common/Line.vue'
	export default {
		data() {
			return {
				 pickerValueDefault: [0, 0, 1],
				 // 用来存储地址信息的对象,
				 pathData:{
					 userName:'',//收货人
					 tel:'',//收货人电话
					 province:'',//省
					 city:'',//市
					 district:'',//区
					 details:'',//详细地址
					 isDefault:'',//是否选中
				 },
				 // 点击修改按钮后会传入index索引值，
				 itemIndex:-1,
				 // 是否修改的状态
				 isStatus:false
			}

		},
		components:{
			Lines,
			mpvueCityPicker
		},
		onLoad(e) {
			if(e.data){
				uni.setNavigationBarTitle({
					title:'修改地址'
				})
				let itemObj=JSON.parse(e.data)
				this.pathData=itemObj.item
				this.itemIndex=itemObj.index
				this.isStatus=true
				// this.pickerText=itemObj.province+itemObj.city+itemObj.district+""
			}else{
				
			}
		},
		onNavigationBarButtonTap(e){
			if(e.float==='right'){
				this.savePath()
			}
		},
		methods: {
			...mapActions(['addPathFn','updatePathFn']),
			 // 三级联动选择
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show()
			},
			onConfirm(e) {
				let arr=e.label.split('-')
				this.pathData.province=arr[0]
				this.pathData.city=arr[1]
				this.pathData.district=arr[2]
				// this.isStatus=true
			},
			// 默认按钮
			isChecked(){console.log(this.pathData.isDefault)
				this.pathData.isDefault='1'
			},
			// 保存方法
			savePath(){
				const {userName,tel,province,city,district,details} = this.pathData
				if(userName && tel && province && city && district && details){
					// 修改
					if(this.isStatus){	
						$http.request({
							url: '/updateAddress',
							method:"POST",
							header:{
								'content-type': 'application/x-www-form-urlencoded',
								token:true
							},
							data:{
								...this.pathData
							}
						}).then((res) =>{
							// this.pathData.isDefault=this.pathData.isDefault==true?1:0
							this.updatePathFn({
								index:this.itemIndex,
								item:this.pathData,
							})
							uni.showToast({
								title:'修改成功',
								icon:'none'
							})
							uni.navigateBack({
								delta:1
							})
						}).catch(() => {
							uni.showToast({
								title: '请求失败',
								icon: 'none'
							})
						})
						
						
					}else{
						// 新增
						$http.request({
							url: '/addAddress',
							method:"POST",
							header:{
								'content-type': 'application/x-www-form-urlencoded',
								token:true
							},
							data:{
								...this.pathData
							}
						}).then((res) =>{
							this.addPathFn(this.pathData)
							uni.navigateBack({
								delta:1
							})
						}).catch(() => {
							uni.showToast({
								title: '请求失败',
								icon: 'none'
							})
						})
					}
				}else{
					uni.showToast({
						title:'请输入完整地址信息',
						icon:'none'
					})
				}
			}
		}
	}
</script>

<style scoped>
.my-add-path{
	margin-left: 20rpx;
}
.path-item{
	display:flex;
	justify-content: space-between;
	padding: 20rpx;
	flex: 1;
	text-align: left;
	border-bottom: 2rpx solid #E1E1E1;
}
.path-item input{
	flex:1;
	text-align:left;
	padding-left: 10rpx;
}
.item-text{
	font-weight: bold;
	padding-right: 20rpx;
}
.save_path_btn{
	margin: 20rpx;

}
</style>
